<!-- 用在内容管理下的 栏目管理和文章管理 -->
<template>
  <div>
    <el-tree
      ref="tree"
      :data="treeData"
      :highlight-current="true"
      :props="defaultProps"
      node-key="columnId"
      @node-click="handleNodeClick"
    >
      <span slot-scope="{ node }" class="el-tree-node__label">
        <span :title="node.label">{{ node.label }}</span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  label: 'tree01',
  // eslint-disable-next-line vue/require-prop-types
  props: ['treeData', 'defaultprops'],
  data() {
    return {
      defaultProps: this.defaultprops
    }
  },
  mounted() {
    this.$nextTick().then(() => {
      // 默认点击第一个
      const firstNode = document.querySelector('.el-tree-node')
      firstNode.click()
    })
  },
  methods: {
    handleNodeClick(data) {
      this.$emit('treeHandle', data)
    }
  }
}
</script>

<style scoped lang="scss">
.el-tree {
  background: #f9f9f9;
  ::v-deep > .is-expanded {
    background: #fff;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }
  ::v-deep > .el-tree-node {
    padding-left: 15px;
  }
  ::v-deep .el-tree-node__content {
    height: 50px;
  }
  ::v-deep .el-tree-node__label {
    font-size: 16px;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  ::v-deep .el-tree-node.is-focusable:hover {
    background-color: #fff;
  }
  ::v-deep .el-tree-node__content:hover {
    background-color: #fff;
  }
  ::v-deep .el-tree-node.is-current.is-focusable {
    background-color: #fff;
    > .el-tree-node__content {
      background-color: #fff;
      > span {
        color: #167ed4;
      }
      > span.is-leaf {
        color: #fff;
      }
    }
  }
}
</style>
